<!-- 
  @name: 登录页
  @date: 2020.4.1
 -->
<template>
	<view class="content">
		<!-- 顶部icon -->
		<view class="icon"></view>
		
		<!-- 输入框 -->
		<view class="item l1">
			<view class="icon-1"></view>
			<input class="int" placeholder="输入账号" placeholder-class="phcolor" v-model.trim="userCode" />
		</view>
		<view class="item l2">
			<view class="icon-2"></view>
			<input :password="true" class="int" placeholder="输入密码" placeholder-class="phcolor" v-model.trim="passWord" />
		</view>
		
		<!-- 按钮 -->
		<view class="btn" @tap="submit">登录</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userCode: '',  //账号
				passWord: '',  //密码
			}
		},
		onLoad() {
			
		},
		methods: {
			//提交
			submit() {
				if(!this.userCode) {
					this.$showToast('请输入账号！');
					return;
				}
				if(!this.passWord) {
					this.$showToast('请输入密码！');
					return;
				}
				uni.login({
					provider: 'weixin',
					success: (rs) => {
						this.submit2(rs.code);
					},
					fail: () => {
						uni.hideLoading();
						this.$showToast('提交失败，请重试');
					}
				});
			},
			submit2(code) {
				this.$http({
					url: this.$api.factoryUrl + 'staffaccountlogin',
					data: {
						code: code,
						userCode: this.userCode,
						passWord: this.passWord
					}
				}).then(res => {
					this.$store.commit('login', res);  //保存token，将登录状态调整为“已登录”
					this.$socket.dispatch('check');  //通过检查websocket来重新连接
					this.$successToast('登录成功');
					this.$sucBack();
				});
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100vw;
		height: 100vh;
		align-items: center;
		background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16EV5OAIWMbAANAt4CrOwo817.png');
	}
	
	/* 顶部icon */
	.icon {
		width: 140rpx;
		height: 140rpx;
		margin-top: 172rpx;
		background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16EV8GAIlkWAAAWGcDJr2I351.png');
	}
	
	/* 输入框及按钮 */
	.btn,
	.item {
		width: 560rpx;
		height: 80rpx;
		border-radius: 40rpx;
	}
	.item.l1 {
		margin-top: 150rpx;
	}
	.item.l2 {
		margin-top: 30rpx;
	}
	.item {
		padding-left: 60rpx;
		padding-right: 124rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		background: rgba(255,255,255,.2);
		.icon-1 {
			width: 24rpx;
			height: 26rpx;
			background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16EV9SAXIQIAAACBomflKY009.png');
		}
		.icon-2 {
			width: 24rpx;
			height: 32rpx;
			background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16EV-GAWGCAAAAChF2_94s059.png');
		}
		.int {
			flex: 1;
			margin-left: 40rpx;
			text-align: center;
			color: $color-white;
		}
	}
	.btn {
		margin-top: 90rpx;
		text-align: center;
		line-height: 80rpx;
		color: $color-white;
		background-color: #343E82;
	}
	
</style>
